<template>
  <div class="product-total-view">
    <div class="content-container">
      <div class="naviga"><span>新产品上市计划&nbsp;>  </span><span class="setColor">时间轴总视图</span></div>
      <div class="mainPage">
        <div class="box">
          <div class="planTitle">新产品上市时间轴</div>
          <div class="years">
            <div class="allyear" v-for="(item,index) in dateData">
              <div :class="{'openList' : item.open == true}">
                <span class="yearNum">{{item.yearNumber}}年</span><span class="iconTap" @click="yearsMonth(index)"> <i :class="[item.open ? 'el-icon-arrow-down' : 'el-icon-arrow-right' ]"></i></span> <span class="circleTap"></span> <span class="totalNum">{{item.categoryNumber}}个品类，{{item.productNumber}}个型号</span>
                <div class="gapYear" :class="{'lastGap': dateData.length == index+1 }"></div>
              </div>
              <div class="allMonth " :class="{'monthOpen' : ite.open == true}" v-for="(ite,inde) in item.listTimeMonth" v-show="item.open">
                <div>
                  <span class="yearNum">{{ite.monthNumber}}月</span><span class="iconTap" @click="monthDate(index,inde)"> <i :class="[ite.open ? 'el-icon-arrow-down' : 'el-icon-arrow-right' ]"></i></span> <span class="circleTap"></span> <span class="totalNum">{{ite.categoryNumber}}个品类,{{ite.productNumber}}个型号</span>
                  <div class="gapYear" :class="{'lastGap': (dateData.length == index+1 && item.listTimeMonth.length == inde+1 && !ite.open) }"></div>
                </div>
                <div class="dateNum" v-for="(i,ind) in ite.listTimeDay" v-show="ite.open">
                  <span class="yearNum">{{i.monthAndDay}}</span><span class="circleTap"></span> <span class="productName" v-for="p in i.listTimeTreeProductResult">
                  <el-popover
                    placement="top-start"
                    :title="p.productName"
                    width="200"
                    trigger="hover">
                    <div>
                      <div><span>所属品类：</span>{{p.categoryName}}</div>
                      <div><span>型号：</span>{{p.productCode}}</div>
                      <div><span>产品类型：</span>{{p.productType}}</div>
                      <div><span>SKU数量：</span>{{p.skuNumber || 0}}<span>个</span></div>
                      <div><span>产品价格：</span>{{p.guidePrice || 0}}<span>元</span></div>
                      <div><span>状态：</span>{{p.status}}</div>
                    </div>
                    <span style="cursor: pointer" slot="reference" @click="planToDetail(p.productId,p.productCode+'/'+p.productName)">{{p.productName}}</span>
                  </el-popover>
                </span>
                  <div class="gapYear" :class="{'lastGap': (dateData.length == index+1 && item.listTimeMonth.length == inde+1 && ite.listTimeDay.length == ind+1) }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import * as opreate from 'api/getData'

  export default {
    name: "product-total-view",
    data(){
      return{
        dateData:[]
      }
    },
    mounted(){
      this.getData()
    },
    methods:{
      yearsMonth(index){
        this.dateData[index].open = !this.dateData[index].open
      },
      monthDate(index,inde){
        this.dateData[index].listTimeMonth[inde].open = !this.dateData[index].listTimeMonth[inde].open
      },
      getData(){
        opreate.timeTree().then(res => {
          this.dateData = res.data || []
        })
      },
      planToDetail(productId,name){
        localStorage.setItem('pname',name)
        const { href } = this.$router.resolve({
          name: `prodQueneDetail`,
          params: {
            productId: productId
          }
        })
        window.open(href, '_blank')
      }
    }
  }
</script>

<style scoped>
  .lastGap{
    display: none;
  }
  .allyear span{
    display: inline-block;
  }
  .box{
    margin-left: 15px;
    margin-right: 15px;
    background: #ffffff;
    padding-bottom: 200px;
  }
  .totalNum{
    width: 400px;
  }
  .yearNum{
    width: 50px;
    text-align: right;
  }
  .iconTap{
    width: 34.5px;
  }
  .gapYear{
    margin: 0 93px;
    width: 1px;
    border-right: #3AAAEC 2px solid;
    height: 30px;
    /*background: #3AAAEC;*/
  }
  .planTitle{
    width: 200px;
    height: 40px;
    background: #3AAAEC;
    margin: 30px auto;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    border-radius: 5px;
  }
  .planTitle:after{
    content: '';
    border-top: 8px solid #3AAAEC;
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 0;
    height: 0;
    position: relative;
    top: 37px;
    left: -63px;
  }
  .years{
    margin-left: calc(50% - 94px );
  }
  .circleTap{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #3AAAEC;
    border: 3px solid #3AAAEC;
  }
  .iconTap{
    padding: 0 10px;
    cursor: pointer;
  }
  .openList .circleTap{
    background: transparent;
  }
  .openList .gapYear{
    height: 20px;
    display: block;
  }
  .allMonth .gapYear{
    height: 20px;
  }
  .allMonth .circleTap{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-left: 2px;
  }
  .monthOpen .circleTap{
    background: transparent;
    border: 2.4px solid #05D7E5;
  }
  .monthOpen .gapYear{
    border-right: 2px #05D7E5 dashed;
  }
  .dateNum .circleTap{
    border: 1.5px solid #05D7E5;
    background: -webkit-radial-gradient(#05D7E5 30%, transparent 0%); /* Safari 5.1 - 6.0 */
    background: -o-radial-gradient(#05D7E5 30%, transparent 0%); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(#05D7E5 30%, transparent 0%); /* Firefox 3.6 - 15 */
    background: radial-gradient(#05D7E5 30%, transparent 0%); /* 标准的语法（必须放在最后） */
  }
  .dateNum .yearNum{
    color: #999;
    margin-left: 20px;
    margin-right: 18px;
  }
  .productName{
    color: #999;
  }
  .productName+span{
    margin-left: 15px;
  }
  .el-icon-arrow-down{
    color: #3AAAEC;
  }
</style>
